<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <template>
                <div>
                    <h5>基本信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="3" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                    <template slot="label"> 姓名</template>
                    <div>{{form.name}}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                    <template slot="label">身份证号码</template>
                    <div>{{form.sfz}}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                    <template slot="label">系统唯一识别码</template>
                    <div>{{form.id_num}}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                    <template slot="label">电话号码</template>
                    <div>{{form.phone}}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 56%" span="2">
                    <template slot="label">联系地址</template>
                    <div>{{form.province_name}} {{form.city_name}} {{form.district_name}} {{form.town_name}}
                        {{form.village_name}} {{form.address}}
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <template>
                <div>
                    <h5>知情同意书信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="4" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 已签订知情同意书</template>
                    <el-form-item prop="is_informed_consent">
                        <el-radio-group v-model="form.is_informed_consent">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 自我申请签订日期</template>
                    <el-form-item prop="user_sign_time">
                        <el-date-picker
                                style="width:100%"
                                v-model="form.user_sign_time"
                                type="date"
                                placeholder="选择日期"
                                :value-format="'yyyy-MM-dd'"
                                clearable
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 证明人声明日期</template>
                    <el-form-item prop="doctor_sign_time">
                        <el-date-picker
                                style="width: 100%"
                                v-model="form.doctor_sign_time"
                                type="date"
                                placeholder="选择日期"
                                :value-format="'yyyy-MM-dd'"
                                clearable
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 证明人姓名</template>
                    <el-form-item prop="doctor_name">
                        <el-input
                                v-model="form.doctor_name"
                                placeholder="请输入证明人姓名"
                                clearable
                        ></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions :column="1" border v-if="this.dialogStatus !== 'formal'">
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small"
                        >取 消
                        </el-button
                        >
                        <el-button
                                type="primary"
                                @click="update()"
                                size="small"
                        >确 定
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>

    </div>
</template>

<script>
    import {createData, updateData} from '@/api/data/data';
    import {allRegion} from "@/api/region/region";
    import {villageAll} from "@/api/village/village";
    import {listMember} from "@/api/member/member";
    import {getToken} from "@/common/token";
    import moment from "moment";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                uploadHeader: {
                    Authorization: "Bearer " + getToken(),
                },
                uploadFileUrl: process.env.VUE_APP_API + "apiadmin/files/uploadOne",
                dialogImageUrl: '',
                user: {},
                form: {
                    id: "",
                    is_informed_consent: 1,
                    informed_consent_image: "",
                    user_sign_time: "",
                    doctor_name: "",
                    doctor_sign_time: "",
                    informed_consent_status: 0,
                    scene: 'informed_consent',
                },
                rules: {

                    user_sign_time: [
                        {
                            required: true,
                            message: "自我申请签订日期不能为空",
                            trigger: "blur",
                        },
                    ],
                    doctor_name: [
                        {
                            required: true,
                            message: "证明人姓名不能为空",
                            trigger: "blur",
                        },
                    ],
                    doctor_sign_time: [
                        {
                            required: true,
                            message: "证明人声明日期不能为空",
                            trigger: "blur",
                        },
                    ]
                },
                updateLoading: false,
                memberList: [],
            };
        },
        created() {
            this.getListMember();
            if (this.dialogStatus == "update" || this.dialogStatus == "formal") {
                this.form = {...this.rowData};

                this.form.sarcoidosis = this.form.sarcoidosis ? JSON.parse(this.form.sarcoidosis) : [];
                this.form.lymph = this.form.lymph ? JSON.parse(this.form.lymph) : [];
                this.form.lump = this.form.lump ? JSON.parse(this.form.lump) : [];

                if (!this.form.user_sign_time) {
                    this.form.user_sign_time = moment().format('YYYY-MM-DD');
                }
                if (!this.form.doctor_sign_time) {
                    this.form.doctor_sign_time = moment().format('YYYY-MM-DD');
                }
                if (!this.form.doctor_name) {
                    this.form.doctor_name = this.$store.state.member.name;
                }
            }
            this.form.is_informed_consent = parseInt(this.form.is_informed_consent)
        },
        methods: {
            //设置表单信息
            handleAvatarSuccess(res, file) {
                if (res.code == 200) {
                    this.form.informed_consent_image = res.data.url;
                } else {
                    this.$message.error(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                const is5M = file.size / 1024 / 1024 < 5;
                if (!is5M) {
                    this.$message('知情同意书不能大于5M')
                }
            },
            delImageData() {
                this.form.informed_consent_image = "";
            },
            // 预览和删除
            handleUploadRemove(file, fileList) {
                this.dialogImageUrl = ''
                this.form.informed_consent_image = ''
            },
            openUrl(url) {
                window.open(url);
            },
            getFileExtension(filename) {
                return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
            },
            getListMember() {
                let params = {
                    user_name: "",
                    status: "",
                    institution_id: this.$store.state.member.institution_id,
                    pageSize: 1000,
                    page: 1,
                }
                listMember(params).then(res => {
                    if (res.code === 200) {
                        this.memberList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                });
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //修改
            update() {
                this.form.scene = 'informed_consent';
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateData(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {},
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }

    .red {
        color: red;
    }

    .el-form-item {
        margin: 0;
    }

    .el-ul {
        list-style: none;
        padding: 0;
    }

    .el-list-li {
        float: left;
        position: relative;
        padding: 10px 10px 0px 0px;
    }

    .el-icon-circle-close {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
        font-size: 20px;
    }

</style>
